<template>
  <div class="search-quotation">
    <SearchKindComponent v-model="searchKinds"/>
    <el-input v-model="kw" style="width:400px;margin-left: 10px" placeholder="请输入查询关键词"></el-input>
    <el-button style="margin-left: 10px" @click="searchPagedQuos">搜索</el-button>
  </div>

  <el-table :data="page.records">
    <el-table-column prop="title" label="标题" show-overflow-tooltip/>
    <el-table-column prop="doi" label="编号" show-overflow-tooltip/>
    <el-table-column prop="page" label="页码" width="100px" show-overflow-tooltip/>
    <el-table-column prop="date" label="出版日期" show-overflow-tooltip/>
    <el-table-column prop="authorsName" label="作者" show-overflow-tooltip/>
    <el-table-column fixed="right" label="操作" width="140px">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="showQuotationDetail(scope.$index)">查看</el-button>
        <el-button link type="primary" size="small" @click="editQuotation(scope.$index)">编辑</el-button>
        <el-button link type="primary" size="small" @click="updateQuotation(scope.$index)">刷新</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="pagination">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-left: 20px"
    ></el-pagination>
  </div>
  <quotation-show-dialog-component/>
</template>

<script setup>
import {provide, ref, onMounted} from "vue";
import SearchKindComponent from "@/components/add/document/common/SearchKindComponent.vue";
import {getPagedQuotationApi, updateQuotationAuthorsStrApi} from "@/apis/quotation";
import {ElMessage} from "element-plus";
import QuotationShowDialogComponent from "@/components/add/document/quotation/QuotationShowDialogComponent.vue";

const quotationShowDialog = ref(false)
provide('quotationShowDialog', quotationShowDialog)
const quotationDetail = ref({})
provide('showQuotation', quotationDetail)
const page = ref({records: [], total: 0})
const showQuotationDesc = () => {
  quotationShowDialog.value = true
}

const showQuotationDetail = (j) => {
  const len = page.value.records.length
  if (0 <= j && j < len) {
    quotationDetail.value = page.value.records[j]
    showQuotationDesc()
  }
}


const reMakeDate = () => {
  for (let i = 0; i < page.value.records.length; i++) {
    page.value.records[i].date = page.value.records[i].date.toString().substring(0, 10)
  }
}


const currentPage = ref(1)
const pageSize = ref(10)

const searchPagedQuos = () => {
  let x = kw.value?.trim()
  if (!x) x = ''
  getPagedQuotationApi(currentPage.value, pageSize.value, x ? sk_index.value + 1 : 0, x).then(resp => {
    if (resp.data.code === 200) {
      page.value = resp.data.data
      reMakeDate()
    } else {
      ElMessage.error(resp.data.msg)
    }
  })
}
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1; // 切换每页大小时，重置当前页码为第一页
  searchPagedQuos()
}
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  searchPagedQuos()
}
onMounted(() => {
  searchPagedQuos()
})

const kw = ref('')
const searchKinds = ref(['标题', 'DOI'])
const sk_index = ref(0)
provide('sk_index', sk_index)

import {inject} from "vue";

const linkTo = inject('linkTo')
const editQuotation = (j) => {
  localStorage.setItem('edit_quotation_doi', page.value.records[j].doi)
  linkTo(2) // 高亮页码跳转到2，2表示编辑引文
}

const updateQuotation = (j) => {
  const len = page.value.records.length
  if (0 <= j && j < len) {
    updateQuotationAuthorsStrApi(page.value.records[j].id).then(resp => {
      if (resp.data.code === 200) {
        const quo = resp.data.data
        quo.date = quo.date.toString().substring(0, 10)
        page.value.records[j] = quo
      } else {
        ElMessage.error(resp.data.msg)
      }
    })
  }
}
</script>
<style scoped>
.search-quotation {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
</style>